<template>
	<div id="home">
		<headers></headers>
		<navs></navs>
		<div class="banner w">
			<div class="left">
				<ul>
					<li
						v-for="(item, i) in bannerList"
						:key="i"
						@mouseenter="show(i)"
						@mouseleave="hide"
					>
						<span class="title">{{ item.title }}</span>
						<span class="more"> > </span>
						<div class="img" v-show="active == i">
							<img :src="item.img" alt="" />
						</div>
					</li>
				</ul>
			</div>
			<swiper></swiper>
		</div>
		<banner-footer></banner-footer>
		<div class="content ">
			<div class="w">
				<miao />
				<one
					:type="phone.title"
					:list="phone.phone"
					:topImg="phone.topimg"
					:leftImg="phone.leftimg"
				/>
				<one
					:type="jia.title"
					:list="jia.tv"
					:topImg="jia.topimg"
					:leftImg="jia.leftimg"
				/>
				<one
					:type="wrap.title"
					:list="wrap.wrap"
					:topImg="wrap.topimg"
					:leftImg="wrap.leftimg"
				/>
				<one
					:type="headset.title"
					:list="headset.headset"
					:topImg="headset.topimg"
					:leftImg="headset.leftimg"
				/>
				<one
					:type="charger.title"
					:list="charger.charger"
					:topImg="charger.topimg"
					:leftImg="charger.leftimg"
				/>
				<one
					:type="rim.title"
					:list="rim.rim"
					:topImg="rim.topimg"
					:leftImg="rim.leftimg"
				/>
			</div>
		</div>
		<div class="sidebar">
			<ul>
				<li v-for="(item, i) in sidebar" :key="i">
					<i :class="item.icon"></i>
					<span>{{ item.title }}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import one from "../components/big/one";
import miao from "../components/miao/miao";
import headers from "../components/headers";
import navs from "../components/navs";
import swiper from "../components/banner/swiper";
import bannerFooter from "../components/banner/footers";
export default {
	name: "home",
	//组件
	components: {
		headers,
		one,
		navs,
		swiper,
		bannerFooter,
		miao,
	},
	//数据
	data() {
		return {
			bannerList: [
				{
					title: "手机 电话卡",
					img: "imges/bannerer/1手机.png",
				},
				{
					title: "电视 盒子",
					img: "imges/bannerer/2电视.png",
				},
				{
					title: "笔记本 显示器",
					img: "imges/bannerer/3笔记本.png",
				},
				{
					title: "家电 插线板",
					img: "imges/bannerer/4家电.png",
				},
				{
					title: "出行 穿戴",
					img: "imges/bannerer/5出行.png",
				},
				{
					title: "智能 路由器",
					img: "imges/bannerer/6智能.png",
				},
				{
					title: "电源 配件",
					img: "imges/bannerer/7电源.png",
				},
				{
					title: "健康 儿童",
					img: "imges/bannerer/8健康.png",
				},
				{
					title: "耳机 音箱",
					img: "imges/bannerer/9耳机.png",
				},
				{
					title: "生活 箱包",
					img: "imges/bannerer/10生活.png",
				},
			],
			active: -1,
			phone: "",
			jia: "",
			wrap: "",
			headset: "",
			charger: "",
			rim: "",
			sidebar: [
				{
					title: "手机APP",
					icon: "el-icon-s-platform",
				},
				{
					title: "个人中心",
					icon: "el-icon-user-solid",
				},
				{
					title: "售后服务",
					icon: "el-icon-s-tools",
				},
				{
					title: "人工客服",
					icon: "el-icon-headset",
				},
				{
					title: "购物车",
					icon: "el-icon-shopping-cart-full",
				},
			],
		};
	},
	//挂载后
	mounted() {
		this.$http.get("hotgoods.json").then((res) => {
			// console.log(res.data.data);
			this.phone = res.data.data[0];
			this.jia = res.data.data[1];
			this.wrap = res.data.data[2];
			this.headset = res.data.data[3];
			this.charger = res.data.data[4];
			this.rim = res.data.data[5];
		});
	},
	//方法
	methods: {
		show(i) {
			this.active = i;
		},
		hide() {
			this.active = -1;
		},
	},
	//过滤，筛选
	filters: {},
	//计算
	computed: {},
	//监听
	watch: {
		//被监听者名称
		$route: {
			//是否一进入页面就开始监听
			immediate: false,
			//执行函数
			handler(newVal, oldVal) {},
			//是否深度监听
			deep: false,
		},
	},
};
</script>

<style lang="scss">
.w {
	width: 1200px;
	margin: 0px auto;
}
.banner {
	position: relative;
	margin-bottom: 10px;
	.left {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 234px;
		height: 460px;
		background-color: rgba(0, 0, 0, 0.253);
		z-index: 200;
		ul {
			color: white;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 25px 0;
		}
		.title {
			float: left;
		}
		.more {
			float: right;
		}
		li {
			padding: 10px 10px;
			.img {
				position: absolute;
				top: 0;
				left: 234px;
				height: 460px;
				img {
					height: 460px;
				}
			}
		}
		li:hover {
			background-color: #ff6700;
		}
	}
}
.content {
	width: 100%;
	background-color: #f5f5f5;
	padding: 100px;
	overflow: hidden;
	h2 {
		text-align: left;
		font-weight: 300;
		margin: 15px 0;
	}
}
.sidebar {
	position: fixed;
	top: 25%;
	right: -40px;
	transform: translate(-50%);
	width: 84px;
	z-index: 3000;
	ul {
		li {
			height: 92px;
			text-align: center;
			border: 1px solid #eee;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: rgb(151, 151, 151);
			i {
				font-size: 40px;
			}
		}
	}
}
</style>
